<template>
  <view class="security-settings-page">
    <!-- 页面头部 -->
    <view class="page-header">
      <view class="header-title">
        <u-icon name="arrow-left" size="20" color="#333" @click="goBack"></u-icon>
        <text class="title-text">安防设置</text>
      </view>
      <view class="header-actions">
        <u-button 
          type="primary" 
          size="small" 
          text="保存" 
          @click="saveSettings"
        ></u-button>
      </view>
    </view>

    <!-- 系统状态 -->
    <view class="system-status">
      <view class="status-title">系统状态</view>
      <view class="status-grid">
        <view class="status-item">
          <view class="status-icon">
            <u-icon name="checkmark-circle" color="#2ed573" size="24"></u-icon>
          </view>
          <view class="status-info">
            <view class="status-name">系统运行</view>
            <view class="status-value">正常</view>
          </view>
        </view>
        <view class="status-item">
          <view class="status-icon">
            <u-icon name="wifi" color="#3742fa" size="24"></u-icon>
          </view>
          <view class="status-info">
            <view class="status-name">网络连接</view>
            <view class="status-value">正常</view>
          </view>
        </view>
        <view class="status-item">
          <view class="status-icon">
            <u-icon name="database" color="#ff9500" size="24"></u-icon>
          </view>
          <view class="status-info">
            <view class="status-name">数据库</view>
            <view class="status-value">正常</view>
          </view>
        </view>
        <view class="status-item">
          <view class="status-icon">
            <u-icon name="cloud" color="#9b59b6" size="24"></u-icon>
          </view>
          <view class="status-info">
            <view class="status-name">云端同步</view>
            <view class="status-value">正常</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 基本设置 -->
    <view class="basic-settings">
      <view class="section-title">基本设置</view>
      <view class="settings-list">
        <view class="setting-item">
          <view class="setting-info">
            <view class="setting-name">系统名称</view>
            <view class="setting-desc">安防管理系统的显示名称</view>
          </view>
          <u-input
            v-model="basicSettings.systemName"
            placeholder="请输入系统名称"
            size="small"
          ></u-input>
        </view>
        <view class="setting-item">
          <view class="setting-info">
            <view class="setting-name">系统版本</view>
            <view class="setting-desc">当前系统版本号</view>
          </view>
          <view class="setting-value">{{ basicSettings.version }}</view>
        </view>
        <view class="setting-item">
          <view class="setting-info">
            <view class="setting-name">自动备份</view>
            <view class="setting-desc">是否启用自动数据备份</view>
          </view>
          <u-switch 
            v-model="basicSettings.autoBackup" 
            @change="updateBasicSetting('autoBackup')"
          ></u-switch>
        </view>
        <view class="setting-item">
          <view class="setting-info">
            <view class="setting-name">日志记录</view>
            <view class="setting-desc">是否启用系统操作日志</view>
          </view>
          <u-switch 
            v-model="basicSettings.logEnabled" 
            @change="updateBasicSetting('logEnabled')"
          ></u-switch>
        </view>
      </view>
    </view>

    <!-- 安全设置 -->
    <view class="security-settings">
      <view class="section-title">安全设置</view>
      <view class="settings-list">
        <view class="setting-item">
          <view class="setting-info">
            <view class="setting-name">密码策略</view>
            <view class="setting-desc">用户密码复杂度要求</view>
          </view>
          <u-picker
            :show="showPasswordPolicyPicker"
            :columns="[passwordPolicyOptions]"
            @confirm="onPasswordPolicyConfirm"
            @cancel="showPasswordPolicyPicker = false"
          ></u-picker>
          <u-input
            v-model="securitySettings.passwordPolicyText"
            placeholder="请选择密码策略"
            readonly
            size="small"
            @click="showPasswordPolicyPicker = true"
          ></u-input>
        </view>
        <view class="setting-item">
          <view class="setting-info">
            <view class="setting-name">登录失败锁定</view>
            <view class="setting-desc">连续登录失败后锁定账户</view>
          </view>
          <u-switch 
            v-model="securitySettings.loginLockEnabled" 
            @change="updateSecuritySetting('loginLockEnabled')"
          ></u-switch>
        </view>
        <view class="setting-item">
          <view class="setting-info">
            <view class="setting-name">会话超时</view>
            <view class="setting-desc">用户会话超时时间（分钟）</view>
          </view>
          <u-input
            v-model="securitySettings.sessionTimeout"
            placeholder="请输入超时时间"
            type="number"
            size="small"
          ></u-input>
        </view>
        <view class="setting-item">
          <view class="setting-info">
            <view class="setting-name">IP白名单</view>
            <view class="setting-desc">允许访问的IP地址列表</view>
          </view>
          <u-button 
            type="info" 
            size="mini" 
            text="配置" 
            @click="configureIpWhitelist"
          ></u-button>
        </view>
      </view>
    </view>

    <!-- 通知设置 -->
    <view class="notification-settings">
      <view class="section-title">通知设置</view>
      <view class="settings-list">
        <view class="setting-item">
          <view class="setting-info">
            <view class="setting-name">邮件通知</view>
            <view class="setting-desc">系统异常时发送邮件通知</view>
          </view>
          <u-switch 
            v-model="notificationSettings.emailEnabled" 
            @change="updateNotificationSetting('emailEnabled')"
          ></u-switch>
        </view>
        <view class="setting-item">
          <view class="setting-info">
            <view class="setting-name">短信通知</view>
            <view class="setting-desc">紧急情况时发送短信通知</view>
          </view>
          <u-switch 
            v-model="notificationSettings.smsEnabled" 
            @change="updateNotificationSetting('smsEnabled')"
          ></u-switch>
        </view>
        <view class="setting-item">
          <view class="setting-info">
            <view class="setting-name">微信通知</view>
            <view class="setting-desc">通过微信公众号发送通知</view>
          </view>
          <u-switch 
            v-model="notificationSettings.wechatEnabled" 
            @change="updateNotificationSetting('wechatEnabled')"
          ></u-switch>
        </view>
        <view class="setting-item">
          <view class="setting-info">
            <view class="setting-name">通知时间</view>
            <view class="setting-desc">允许发送通知的时间段</view>
          </view>
          <u-button 
            type="info" 
            size="mini" 
            text="设置" 
            @click="setNotificationTime"
          ></u-button>
        </view>
      </view>
    </view>

    <!-- 高级设置 -->
    <view class="advanced-settings">
      <view class="section-title">高级设置</view>
      <view class="settings-list">
        <view class="setting-item">
          <view class="setting-info">
            <view class="setting-name">调试模式</view>
            <view class="setting-desc">启用系统调试信息输出</view>
          </view>
          <u-switch 
            v-model="advancedSettings.debugMode" 
            @change="updateAdvancedSetting('debugMode')"
          ></u-switch>
        </view>
        <view class="setting-item">
          <view class="setting-info">
            <view class="setting-name">性能监控</view>
            <view class="setting-desc">启用系统性能监控</view>
          </view>
          <u-switch 
            v-model="advancedSettings.performanceMonitor" 
            @change="updateAdvancedSetting('performanceMonitor')"
          ></u-switch>
        </view>
        <view class="setting-item">
          <view class="setting-info">
            <view class="setting-name">数据清理</view>
            <view class="setting-desc">清理过期数据</view>
          </view>
          <u-button 
            type="warning" 
            size="mini" 
            text="清理" 
            @click="cleanExpiredData"
          ></u-button>
        </view>
        <view class="setting-item">
          <view class="setting-info">
            <view class="setting-name">系统重启</view>
            <view class="setting-desc">重启安防管理系统</view>
          </view>
          <u-button 
            type="error" 
            size="mini" 
            text="重启" 
            @click="restartSystem"
          ></u-button>
        </view>
      </view>
    </view>

    <!-- 密码策略选择器 -->
    <u-picker
      :show="showPasswordPolicyPicker"
      :columns="[passwordPolicyOptions]"
      @confirm="onPasswordPolicyConfirm"
      @cancel="showPasswordPolicyPicker = false"
    ></u-picker>
  </view>
</template>

<script setup>
/**
 * 安防设置页面
 * @author Wu.Liang
 * @date 2025-01-30
 * @version 1.0.0
 * @description 安防设置功能，包含系统配置、权限管理等
 */

import { ref, reactive, onMounted } from 'vue'

// 页面状态
const showPasswordPolicyPicker = ref(false)

// 基本设置
const basicSettings = reactive({
  systemName: '智慧社区安防管理系统',
  version: 'v2.1.0',
  autoBackup: true,
  logEnabled: true
})

// 安全设置
const securitySettings = reactive({
  passwordPolicy: 'medium',
  passwordPolicyText: '中等',
  loginLockEnabled: true,
  sessionTimeout: 30
})

// 通知设置
const notificationSettings = reactive({
  emailEnabled: true,
  smsEnabled: true,
  wechatEnabled: false
})

// 高级设置
const advancedSettings = reactive({
  debugMode: false,
  performanceMonitor: true
})

// 密码策略选项
const passwordPolicyOptions = [
  { label: '低', value: 'low', text: '低' },
  { label: '中等', value: 'medium', text: '中等' },
  { label: '高', value: 'high', text: '高' },
  { label: '极高', value: 'extreme', text: '极高' }
]

// 方法
const goBack = () => {
  uni.navigateBack()
}

const updateBasicSetting = (key) => {
  const settingNames = {
    autoBackup: '自动备份',
    logEnabled: '日志记录'
  }
  
  const status = basicSettings[key] ? '启用' : '禁用'
  uni.showToast({
    title: `${settingNames[key]}已${status}`,
    icon: 'success'
  })
}

const updateSecuritySetting = (key) => {
  const settingNames = {
    loginLockEnabled: '登录失败锁定'
  }
  
  const status = securitySettings[key] ? '启用' : '禁用'
  uni.showToast({
    title: `${settingNames[key]}已${status}`,
    icon: 'success'
  })
}

const updateNotificationSetting = (key) => {
  const settingNames = {
    emailEnabled: '邮件通知',
    smsEnabled: '短信通知',
    wechatEnabled: '微信通知'
  }
  
  const status = notificationSettings[key] ? '启用' : '禁用'
  uni.showToast({
    title: `${settingNames[key]}已${status}`,
    icon: 'success'
  })
}

const updateAdvancedSetting = (key) => {
  const settingNames = {
    debugMode: '调试模式',
    performanceMonitor: '性能监控'
  }
  
  const status = advancedSettings[key] ? '启用' : '禁用'
  uni.showToast({
    title: `${settingNames[key]}已${status}`,
    icon: 'success'
  })
}

const onPasswordPolicyConfirm = (event) => {
  const selected = event.value[0]
  securitySettings.passwordPolicy = selected.value
  securitySettings.passwordPolicyText = selected.text
  showPasswordPolicyPicker.value = false
  
  uni.showToast({
    title: `密码策略已设置为${selected.text}`,
    icon: 'success'
  })
}

const configureIpWhitelist = () => {
  uni.showModal({
    title: 'IP白名单配置',
    content: 'IP白名单配置功能开发中，请稍后使用',
    showCancel: false
  })
}

const setNotificationTime = () => {
  uni.showModal({
    title: '通知时间设置',
    content: '通知时间设置功能开发中，请稍后使用',
    showCancel: false
  })
}

const cleanExpiredData = () => {
  uni.showModal({
    title: '数据清理确认',
    content: '确定要清理过期数据吗？此操作不可恢复！',
    success: (res) => {
      if (res.confirm) {
        uni.showLoading({
          title: '正在清理...'
        })
        
        setTimeout(() => {
          uni.hideLoading()
          uni.showToast({
            title: '数据清理完成',
            icon: 'success'
          })
        }, 2000)
      }
    }
  })
}

const restartSystem = () => {
  uni.showModal({
    title: '系统重启确认',
    content: '确定要重启安防管理系统吗？重启期间系统将无法使用！',
    success: (res) => {
      if (res.confirm) {
        uni.showModal({
          title: '二次确认',
          content: '重启操作将影响所有在线用户，确定要继续吗？',
          success: (res2) => {
            if (res2.confirm) {
              uni.showLoading({
                title: '系统重启中...'
              })
              
              setTimeout(() => {
                uni.hideLoading()
                uni.showToast({
                  title: '系统重启完成',
                  icon: 'success'
                })
              }, 3000)
            }
          }
        })
      }
    }
  })
}

const saveSettings = () => {
  uni.showLoading({
    title: '正在保存...'
  })
  
  setTimeout(() => {
    uni.hideLoading()
    uni.showToast({
      title: '设置保存成功',
      icon: 'success'
    })
  }, 1000)
}

// 页面加载
onMounted(() => {
  console.log('安防设置页面加载完成')
})
</script>

<style lang="scss" scoped>
.security-settings-page {
  min-height: 100vh;
  width: 100vw;
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.page-header {
  background: white;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
  
  .header-title {
    display: flex;
    align-items: center;
    gap: 12px;
    
    .title-text {
      font-size: 18px;
      font-weight: 600;
      color: #333;
    }
  }
}

.system-status {
  background: white;
  padding: 16px;
  margin-bottom: 12px;
  
  .status-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 16px;
  }
  
  .status-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  
  .status-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 8px;
    
    .status-icon {
      flex-shrink: 0;
    }
    
    .status-info {
      flex: 1;
      min-width: 0;
      
      .status-name {
        font-size: 14px;
        font-weight: 500;
        color: #333;
        margin-bottom: 4px;
      }
      
      .status-value {
        font-size: 12px;
        color: #666;
      }
    }
  }
}

.basic-settings,
.security-settings,
.notification-settings,
.advanced-settings {
  background: white;
  padding: 16px;
  margin-bottom: 12px;
  
  .section-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 16px;
  }
  
  .settings-list {
    .setting-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 0;
      border-bottom: 1px solid #f0f0f0;
      
      &:last-child {
        border-bottom: none;
      }
      
      .setting-info {
        flex: 1;
        min-width: 0;
        margin-right: 16px;
        
        .setting-name {
          font-size: 16px;
          font-weight: 500;
          color: #333;
          margin-bottom: 4px;
        }
        
        .setting-desc {
          font-size: 12px;
          color: #666;
        }
      }
      
      .setting-value {
        font-size: 14px;
        color: #666;
        font-weight: 500;
      }
    }
  }
}

// 响应式适配
@media screen and (max-width: 375px) {
  .page-header {
    padding: 12px;
  }
  
  .system-status,
  .basic-settings,
  .security-settings,
  .notification-settings,
  .advanced-settings {
    padding: 12px;
  }
  
  .status-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  
  .status-item {
    padding: 12px;
  }
  
  .setting-item {
    padding: 12px 0;
    
    .setting-info {
      margin-right: 12px;
    }
  }
}

@media screen and (min-width: 414px) {
  .security-settings-page {
    width: 100vw;
    max-width: none;
    margin: 0;
  }
}
</style>
